<template>
    <panel-head :route="route"/>
    <div class="btns">
        <el-button :icon="Plus" type="primary" @click="open(null)">打开</el-button>
    </div>
    <el-table :data="tableData.list" style="width: 100%;">
        <el-table-column prop="id" label="id"/>
        <el-table-column prop="name" label="昵称"/>
        <el-table-column prop="permissionName" label="菜单权限" width="500px"/>
       <el-table-column label="操作">
        <template #default="scope">
            <el-button type="primary" @click="open(scope.row)">编辑</el-button>
        </template>
       </el-table-column>
    </el-table>
    <div class="pagination-info">
        <!-- 分页数据 -->
        <el-pagination
            v-model:current-page="paginationData.pageNum"
            :page-size="paginationData.pageSize"
            :background="false"
            size="small"
            layout="total, prev, pager, next"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
    </div>
            <!-- 权限弹窗 -->
             <el-dialog
             v-model="dialogFormVisable"
             :before-close="beforeClose"
             title="添加权限"
             width="500"
             >
               <el-form
               ref="formRef"
               label-width="100px"
               label-position="left"
               :model="form"
               :rules="rules"
               >
                 <el-form-item v-show="false" prop="id">
                     <el-input v-model="form.id" />
                 </el-form-item>
                 <el-form-item label="名称" prop="name">
                     <el-input v-model="form.name" placeholder="请填写权限名称" />
                 </el-form-item>
                 <el-form-item label="权限" prop="permissions">
                     <el-tree
                     ref="treeRef" 
                     style="max-width: 600px;"
                     :data="permissionDate"
                     node-key="id"
                     show-checkbox
                     :default-checked-keys="defaultKeys"
                     :default-expanded-keys="[2]"
                     />
                 </el-form-item>
              </el-form>
           <template #footer>
               <div class="dialog-footer">
                   <el-button type="primary" @click="confirm(formRef)">确认</el-button>
               </div>
           </template>
         </el-dialog>
</template>

<script setup>
    import {ref,reactive, onMounted, nextTick} from 'vue'
    //导入接口
    import { userGetMenu,userSetMenu,getMenuList } from '../../../api/auth/index';
    import { ElMessage } from 'element-plus';
    import { Plus } from '@element-plus/icons-vue';
    import { useRoute } from 'vue-router';
    const route = useRoute()

    //树形菜单权限数据
    const permissionDate = ref([])
    //控制弹窗显示隐藏
    const dialogFormVisable = ref(false)
    //列表数据
    const tableData = reactive({
        list:[],
        total:0
    })
    //分页数据
    const paginationData =reactive({
        pageNum:1,
        pageSize:10
    })
    const formRef = ref()
    //form的数据
    const form = reactive({
        id:'',
        name:'',
        permissions:'',
    })
     //选中权限。默认选中的
    const defaultKeys = [4,5]

    const treeRef = ref()
    //获取数据
    onMounted(()=>{
        userGetMenu().then(({data})=>{
            // console.log(data);
            permissionDate.value = data.data
        })
        getListData()
    })
    //打开弹窗
    const open  =(rowDate ={})=>{
        dialogFormVisable.value = true
        //打开form生成时异步操作
        nextTick(()=>{
            //如果时编辑操作，先进行数据回填
            if(rowDate){
                Object.assign(form,{id:rowDate.id,name:rowDate.name})
                treeRef.value.setCheckedKeys(rowDate.permission)
            }
        })
    }
    //分页控制
    const handleSizeChange = (val)=>{
        paginationData.pageSize  =val
    }

    const handleCurrentChange = (val)=>{
        paginationData.pageNum = val
        getListData()
    }

    //请求列表数据
    const getListData=()=>{
        getMenuList(paginationData).then(({data})=>{
            // console.log(data,'请求列表');
            const {list,total} = data.data
            tableData.list = list
            tableData.total = total
        })
    }
    //关闭弹窗回调
    const beforeClose =()=>{
        dialogFormVisable.value =false
        //重置表单
        formRef.value.resetFields()
        //tree选择重置
        treeRef.value.setCheckedKeys(defaultKeys)
    }
    const rules = reactive({
        name:[{required:true,trigger:'blur',message:"请输入权限名称"}]
    })

    //表单提交
    const confirm = async(formEl)=>{
        if (!formEl) return
        //触发校验
        await formEl.validate((valid, fields)=>{
        if(valid){
        const permissions = JSON.stringify(treeRef.value.getCheckedKeys())
        userSetMenu({name:form.name,permissions,id:form.id}).then(({data})=>{
            // console.log(data);
            beforeClose()
            getListData()
            ElMessage.success('操作成功')
        })
        }else{
            console.log('error submit',fields);
        }
      })
        }
</script>

<style lang="less" scoped>
.btns{
    padding: 10px 0 10px 10px;
    background-color: #fff;
}

</style>